<template>
  <div class="home">
    <div class="box">
        <el-alert
            title="只允许为第三级分类设置相关参数"
            type="warning" class="el-icon-warning">
        </el-alert>

        <br>

        <el-form :model="ziyuan">
            <el-form-item label="选择商品分类" :label-width="formLabelWidth"  >
                <el-select 
                v-model="value" 
                placeholder="请选择商品分类" 
                ref="selectTree" >
                    <el-option :key="ziyuan.id" :value="ziyuan.attr_name" :label="ziyuan.attr_name" hidden/>
                        <el-tree :data="form"
                        :props="defaultProps"
                        node-key="id"
                        accordion
                        highlight-current
                        @node-click="handleNodeClick"/>
                        </el-select>         
            </el-form-item>
        </el-form>

      <span @click="add" class="add">{{canshu.sel=='only'?'添加静态参数':'添加动态参数'}}</span>
        <el-menu  class="el-menu-demo" mode="horizontal" default-active="2">
        <el-menu-item index="1"  @click.native="dt">动态参数</el-menu-item>
        <el-menu-item index="2" @click.native="jt">静态属性</el-menu-item>
        
        <el-table :data="form1" style="width: 80vw" height="47vh" :stripe="true" border>
          <el-table-column prop="attr_name" label="参数名称" width="600"></el-table-column>
          <el-table-column  prop="address" label="操作">
            <template slot-scope="scope">
                <span @click="bj(scope.row)" class="el-icon-edit bianji">编辑</span>
                <span @click="del(scope.row)" class="el-icon-delete bianji">删除</span>
            </template>  
          </el-table-column>
        </el-table>
        </el-menu>

        <!-- 添加参数 -->
        <el-dialog  title="添加参数" :visible.sync="dialogFormVisible">
            <el-form :model="ziyuan">
                        <el-form-item label="参数名称" :label-width="formLabelWidth">
                            <el-input v-model="ziyuan.attr_name" autocomplete="off"></el-input>
                        </el-form-item>
            </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="tj">确 定</el-button>
                </div>
        </el-dialog>
        
        <!-- 编辑参数 -->
        <el-dialog  title="编辑参数" :visible.sync="dialogFormVisible1">
            <el-form :model="ziyuan">
                        <el-form-item label="参数名称" :label-width="formLabelWidth">
                            <el-input v-model="ziyuan.attr_name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="选择参数类型" :label-width="formLabelWidth"  >
                        <el-select v-model="values">
                            <el-option label="静态" value="only">静态</el-option>
                            <el-option label="动态" value="many">动态</el-option>
                        </el-select>
                        </el-form-item>
            </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="bjcg">确 定</el-button>
                </div>
        </el-dialog>
    </div>
  </div>
</template>

<script>
import {spflrequest,flcsrequest,addcsrequest,delcsrequest,bjcsrequest} from '../../../request/api/goods/spfl'
export default {
    data(){
        return{
            ziyuan:{
                id:'',
                attr_name:'',
                attr_sel:'',
                attr_vals:'',
                level:'',
                attr_id:''
            },
            form:[],
            formLabelWidth:'120px',
            value:'',
            defaultProps: {
                children: 'children',
                label: 'cat_name'
            },
            canshu:{
                id:'',
                sel:'only'
            },
            form1:[],
            dialogFormVisible:false,
            dialogFormVisible1:false,
            values:''
        }
    },
    methods:{
        fb(){
            spflrequest().then(res=>{
                this.form=res.data.data
            })
        },
        cs(){
            flcsrequest(this.canshu).then(res=>{
                this.form1=res.data.data
            })
        },
        handleNodeClick(data){
            console.log();
            this.form.map(item=>{
                if(item.children){
                    item.children.map(x=>{
                        if(x.cat_id==data.cat_pid&&x.cat_pid==item.cat_id){
                            this.value=item.cat_name+'/'+x.cat_name+'/'+data.cat_name
                            this.ziyuan.level=data.cat_level
                            this.canshu.id=data.cat_id
                            this.ziyuan.id=data.cat_id
                            this.$refs.selectTree.blur()
                        } 
                    })
                }     
            })
            this.ziyuan.attr_sel=this.canshu.sel
            if(this.value){
                this.cs()
            }
            console.log(data);
            
        },
        jt(){
            this.canshu.sel='only'
            this.ziyuan.attr_sel='only'

            this.cs()
        },
        dt(){
            this.canshu.sel='many'
            this.ziyuan.attr_sel='many'
            this.cs()

        },
        add(){
            this.ziyuan.attr_name=''
            console.log(this.ziyuan.level);
            if(this.ziyuan.level==2){
                this.dialogFormVisible=true
            }else{
                alert('请选择三级分类')
            }
            
        },
        del(scope){
            this.ziyuan.id=this.canshu.id
            this.ziyuan.attr_id=scope.attr_id
                delcsrequest(this.ziyuan).then(res=>{
                    if(res.data.meta.status==200){
                        
                        this.cs()
                    }else{
                        alert('删除失败')
                    }
                })           
        },
        bj(scope){
            this.ziyuan.attr_name=scope.attr_name
            this.values=scope.attr_sel
            this.ziyuan.attr_id=scope.attr_id
            this.dialogFormVisible1=true
        },
        tj(){
            addcsrequest(this.ziyuan).then(res=>{
                if(res.data.meta.status==201){
                    this.dialogFormVisible=false
                    this.cs()
                }else{
                    alert('添加失败')
                }
            })
        },
        bjcg(){
            this.ziyuan.attr_sel=this.values
            bjcsrequest(this.ziyuan).then(res=>{
                if(res.data.meta.status==200){
                    this.dialogFormVisible1=false
                    this.cs()
                }else{
                    alert('编辑失败')
                }
            })
        }
    },
    created(){
        this.fb()
    }
}
</script>

<style scoped>
    .box{
        width: 80vw;
        height: 78vh;
        background-color: white;
        padding: 20px;
    }
    .bianji{
      width: 45px;
      text-align: center;
      height: 25px;
      margin-left: 10px;
      line-height: 25px;
      display: inline-block;
      color:white;
      cursor: pointer;
      padding: 3px 10px;
    }
    .el-icon-edit{
      background-color: #1f89f3;
    }
    .el-icon-delete{
      background-color: red;
    }
    .add{
        width: 180px;
        height: 40px;
        display: inline-block;
        border: 1px solid #c0c0c0;
        border-radius: 3px;
        cursor: pointer;
        vertical-align: top;
        text-align: center;
        line-height: 40px;
        background-color: #1f89f3;
        color:white;
        margin-bottom: 20px;
    }
</style>